<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>关键词高亮插件</title>
  <link rel="stylesheet" href="popup.css">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<div class="container">
  <header class="app-header">
    <h1>关键词高亮</h1>
    <div class="header-actions">
      <button id="toggle-highlight" class="toggle-btn active">
        <span class="material-icons">highlight</span>
        <span>已启用</span>
      </button>
    </div>
  </header>

  <div class="tabs">
    <button class="tab-btn active" data-tab="groups">分组管理</button>
    <button class="tab-btn" data-tab="keywords">关键词管理</button>
    <button class="tab-btn" data-tab="settings">设置</button>
  </div>

  <div class="tab-content">
    <!-- 分组管理 -->
    <div id="groups-tab" class="tab-panel active">
      <div class="panel-header">
        <h2>分组管理</h2>
        <div class="action-buttons">
          <button id="view-group-keywords" class="btn secondary" disabled>
            <span class="material-icons">visibility</span>
            查看组内关键词
          </button>
          <button id="add-group" class="btn primary">
            <span class="material-icons">add</span>
            新建分组
          </button>
        </div>
      </div>
      <div id="groups-list" class="groups-list">
        <!-- 分组卡片将动态生成 -->
      </div>
    </div>

    <!-- 关键词管理 -->
    <div id="keywords-tab" class="tab-panel">
      <div class="panel-header">
        <h2>关键词管理</h2>
        <div class="action-buttons">
          <!-- 单个添加关键词的按钮样式设置为：display: none;不显示，因为批量添加功能满足所有需求 -->
          <button id="add-keyword" class="btn secondary" style="display: none;">
            <span class="material-icons">add</span>
            添加关键词
          </button>
          <!-- 批量添加关键词 -->
          <button id="batch-add-keyword" class="btn secondary">
            <span class="material-icons">playlist_add</span>
            添加关键词
          </button>
          <button id="import-keywords" class="btn secondary">
            <span class="material-icons">file_upload</span>
            批量导入
          </button>
          <button id="clear-all" class="btn danger">
            <span class="material-icons">delete</span>
            清空所有
          </button>
        </div>
      </div>
      <div class="search-box">
        <input type="text" id="keyword-search" placeholder="搜索关键词...">
        <span class="material-icons">search</span>
      </div>
      <div class="filter-row">
        <div class="filter-group">
          <label for="group-filter">按分组筛选:</label>
          <select id="group-filter">
            <option value="">全部分组</option>
            <!-- 分组选项将动态生成 -->
          </select>
        </div>
        <div class="filter-group">
          <label for="sort-keywords">排序方式:</label>
          <select id="sort-keywords">
            <option value="name">按名称</option>
            <option value="group">按分组</option>
            <option value="date">按添加时间</option>
          </select>
        </div>
      </div>
      <div id="keywords-stats" class="keywords-stats" style="display: none;">
        <!-- 统计信息将动态生成 -->
      </div>
      <div id="keywords-list" class="keywords-list">
        <!-- 关键词列表将动态生成 -->
      </div>
    </div>

    <!-- 设置 -->
    <div id="settings-tab" class="tab-panel">
      <div class="panel-header">
        <h2>设置</h2>
      </div>

      <div id="featureArea">
        <div class="feature-item">
          <span class="feature-name">当前页面是否活跃</span>
          <label class="switch">
            <input id="activityToggle" type="checkbox">
            <span class="slider"></span>
          </label>
        </div>
        <div class="feature-item">
          <div class="empty">
            <h3>活跃页面</h3>
            <div class="active-tabs" id="activeTabsList"></div>
          </div>
        </div>
      </div>

      <div class="settings-section">
        <h3>工具提示设置</h3>
        <div class="setting-item">
          <label for="tooltip-theme">工具提示主题</label>
          <select id="tooltip-theme">
            <option value="dark">暗色主题</option>
            <option value="light">亮色主题</option>
          </select>
        </div>
        <div class="setting-item">
          <label for="tooltip-position">工具提示位置</label>
          <select id="tooltip-position">
            <option value="follow">跟随鼠标</option>
            <option value="above">关键词上方</option>
            <option value="below">关键词下方</option>
          </select>
        </div>
      </div>

      <div class="settings-section">
        <h3>性能设置</h3>
        <div class="setting-item">
          <label for="scan-delay">扫描延迟 (ms)</label>
          <input type="number" id="scan-delay" min="100" max="5000" value="300">
          <p class="setting-description">调整高亮扫描的延迟时间，数值越大性能越好但响应越慢</p>
        </div>

        <div class="setting-item">
          <label>
            <input type="checkbox" id="regex-support">
            启用正则表达式支持
          </label>
        </div>
      </div>

      <div class="settings-section">
        <h3>数据管理</h3>
        <div class="setting-item">
          <label>存储使用情况</label>
          <div class="storage-info">
            <div class="storage-bar">
              <div id="storage-used" class="storage-used"></div>
            </div>
            <span id="storage-text">0 KB / 5 MB</span>
          </div>
        </div>

        <div class="setting-actions">
          <button id="export-data" class="btn secondary">导出数据</button>
          <button id="import-data" class="btn secondary">导入数据</button>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- 分组编辑模态框 -->
<div id="group-modal" class="modal">
  <div class="modal-content">
    <div class="modal-header">
      <h3 id="group-modal-title">新建分组</h3>
      <button class="close-btn">&times;</button>
    </div>
    <div class="modal-body">
      <div class="form-group">
        <label for="group-name">分组名称</label>
        <input type="text" id="group-name" placeholder="输入分组名称">
      </div>
      <div class="form-group">
        <label for="group-color">分组颜色</label>
        <input type="color" id="group-color" value="#4285f4">
      </div>
    </div>
    <div class="modal-footer">
      <button id="cancel-group" class="btn secondary">取消</button>
      <button id="save-group" class="btn primary">保存</button>
    </div>
  </div>
</div>

<!-- 关键词编辑模态框 -->
<div id="keyword-modal" class="modal">
  <div class="modal-content">
    <div class="modal-header">
      <h3 id="keyword-modal-title">添加关键词</h3>
      <button class="close-btn">&times;</button>
    </div>
    <div class="modal-body">
      <div class="form-group">
        <label for="keyword-group">所属分组</label>
        <select id="keyword-group">
          <!-- 分组选项将动态生成 -->
        </select>
      </div>
      <div class="form-group">
        <label for="keyword-text">关键词</label>
        <input type="text" id="keyword-text" placeholder="输入关键词">
      </div>
      <div class="form-group">
        <label for="keyword-tip">提示信息</label>
        <textarea id="keyword-tip" placeholder="输入关键词提示信息"></textarea>
      </div>
    </div>
    <div class="modal-footer">
      <button id="cancel-keyword" class="btn secondary">取消</button>
      <button id="save-keyword" class="btn primary">保存</button>
    </div>
  </div>
</div>

<!-- 批量添加关键词模态框 -->
<div id="batch-keyword-modal" class="modal">
  <div class="modal-content">
    <div class="modal-header">
      <h3>批量添加关键词</h3>
      <button class="close-btn">&times;</button>
    </div>
    <div class="modal-body">
      <div class="form-group">
        <label for="batch-keyword-group">所属分组</label>
        <select id="batch-keyword-group">
          <!-- 分组选项将动态生成 -->
        </select>
      </div>
      <div class="form-group">
        <label for="batch-keyword-text">关键词列表</label>
        <textarea id="batch-keyword-text" placeholder="请输入多个关键词，可以用空格、逗号、换行符等分隔&#10;例如：&#10;关键词1, 关键词2, 关键词3&#10;或者：&#10;关键词1 关键词2 关键词3&#10;或者每行一个关键词"></textarea>
        <p class="setting-description">支持使用空格、逗号、分号、换行等符号分隔多个关键词</p>
      </div>
      <div class="form-group">
        <label for="batch-keyword-tip">统一提示信息（可选）</label>
        <textarea id="batch-keyword-tip" placeholder="为所有关键词设置统一的提示信息"></textarea>
      </div>
      <div class="batch-preview" id="batch-preview">
        <h4>预览（将添加 <span id="preview-count">0</span> 个关键词）</h4>
        <div class="preview-list" id="preview-list">
          <!-- 预览列表将动态生成 -->
        </div>
        <div class="batch-stats" id="batch-stats" style="display: none;">
          <!-- 统计信息将动态生成 -->
        </div>
      </div>
    </div>
    <div class="modal-footer">
      <button id="cancel-batch-keyword" class="btn secondary">取消</button>
      <button id="save-batch-keyword" class="btn primary">保存</button>
    </div>
  </div>
</div>

<script src="popup.js"></script>
</body>
</html>